<template>
  <view class="content">
    <scroll-view class="classList" scroll-x>
      <view class="classItem" :class="postData.parentCateId===item.id?'classItemHover':''" v-for="item in classList" @click="setClass(item.id)">
        {{item.categoryName}}
      </view>
    </scroll-view>
    <scroll-view class="list" scroll-y @scrolltolower="end" :lower-threshold="200">
      <view class="noData" v-if="total===0">
        <no_order title="暂无数据"></no_order>
      </view>
      <view class="topic-item" v-for="(item,index) in list" @click="toDetails(item.id,index)">
        <view class="topic-box">
          <view class="topic-top">
            <view class="image"><image mode="aspectFill" :src="item.thumb"></image></view>
            <view class="topic-info">
              <view class="title">{{item.title}}</view>
              <view class="tag-box">
                <view class="tag" :class="item.cateNames.length>10?'tagAfter':''" v-if="item.cateNames">
                  <text v-for="text in item.cateNames.split('、')">{{text}}</text>
                </view>
                <view class="button" v-if="item.followed===0" @click.stop="setTopicFollow($event,item,index)"><uni-icons color="#00C141" type="plusempty"></uni-icons> 关注</view>
                <view class="button yi-button" v-if="item.followed===1" @click.stop="setTopicFollow($event,item,index)">已关注</view>
              </view>

<!--              <view class="userCount">{{item.joinNum || 0}}参与</view>-->
            </view>
          </view>
          <view class="source">来自：{{item.parentCateNames}}</view>
          <view class="desc">{{item.introduction}}</view>
        </view>
      </view>
    </scroll-view>
    <to-message ref="toMessage"></to-message>
  </view>
</template>

<script>
import toMessage from "@/pages/circle/components/toMessage.vue";

export default {
  components: {toMessage},
  data() {
    return {
      classList:[],
      classId:0,
      postData:{
        parentCateId:"",
        page:1,
        pageSize:10
      },
      list:[],
      total:""
    };
  },
  onLoad(e) {
    this.postData.parentCateId=parseInt(e.classId);
    this.getCircleCategory();
    this.getList()
  },
  onShow() {
  	let info = uni.getStorageSync('circleDetails')
  	if(info){
	  uni.getStorageSync("circleDetails",false)
  	  this.setListItem(info.index,info.info)
  	}
  },
  methods:{
    setClass(id){
      this.postData={
        parentCateId: id,
        page:1,
        pageSize: 10
      }
      this.list=[]
      this.getList()
    },
    // 刷新列表数据
    setListItem(index,info)
    {
		console.log(info,index)
      this.list[index].followed=info.followed
    },
    async getCircleCategory()
    {
      let {data} = await this.$javaCircle.doRequest("post","circle/customer/topic/getCircleCategory","","",false)
      this.classList=data.data
    },
    async getList(){
      let {data} = await this.$javaCircle.doRequest("post","circle/customer/topic/getTopicListByCate",this.postData,'json',false)
      this.total=data.data.total
      this.list=this.list.concat(data.data.list.map(item=>{
        item.cateNames=item.cateNames.substring(0,14)
        return item
      }));
    },
    toDetails(id,index){
      uni.navigateTo({url:"/pages/circle/details/details?id="+id+'&index='+index})
    },
    // 关注话题
    async setTopicFollow(e,item,index)
    {
      let followType=item.followed===1?0:1
      let url = 'circle/customer/topic/setTopicFollow?topicId='+item.id+'&followType='+followType
      let {data} = await this.$javaCircle.doRequest("post",url,'','',false)
      if(data.code!==0){
        uni.showToast({title:data.message,icon:"none"})
        return
      }
      if(data.data.addIntegral>0){
        this.showMessage(e,'积分+'+data.data.addIntegral)
      }
      this.list[index].followed=followType
    },
    showMessage(e,title){
      this.$refs.toMessage.init(e.detail.x,e.detail.y,title)
    },
    end(){
      if(this.total>this.postData.page*this.postData.pageSize){
        this.postData.page++
        this.getList()
      }
    }
  }
}
</script>

<style lang="scss">
.content{
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.classList{
  width: 100%;
  padding: 20upx 72upx;
  white-space: nowrap;
  .classItem{
    display: inline-block;
    width: fit-content;
    height: 68upx;
    background-color: #F8F8FA;
    border-radius: 34upx;
    box-sizing: border-box;
    padding: 0 27upx;
    line-height: 68upx;
    font-size: 36upx;
    color: #707173;
    margin-right: 60upx;
    font-weight: 500;
  }
  .classItemHover{
    background-color: #54B174;
    color: #fff;
  }
}
.list{
  flex: 1;
  overflow: auto;
}
.topic-box{
  box-sizing: border-box;
  padding: 20upx;
  padding-bottom: 0upx;
  position: relative;
  .topic-top{
    width: 100%;
    display: flex;
    .image{
      width: 140upx;
      height: 140upx;
      border-radius: 8upx;
      background-color: #666666;
      margin-right: 20upx;
      image{
        width: 100%;
        height: 100%;
        border-radius: 8upx;
      }
    }
    .topic-info{
      flex: 1;
      .title{
        font-size: 42upx;
        color: #000;
        font-weight: 500;
        margin-bottom: 24upx;
      }
      .tag{
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        margin-bottom: 8upx;
        text{
          background-color: #F1FAF3;
          color: #6AAC80;
          font-size: 30upx;
          box-sizing: border-box;
          padding: 0 8upx;
          border-radius: 8upx;
          margin-right: 12upx;
        }
      }
      .tagAfter::after {
        content: "...";
        display: inline-block;
        background-color: #F1FAF3;
        width: 0;
        color: #6AAC80;
      }
      .userCount{
        font-size: 28upx;
        color: #999999;
      }
    }
  }
  .source{
    width: 400upx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 28upx;
    color: #999999;
    margin-top: 12upx;
  }
  .button{
    width: 122upx;
    height: 54upx;
    border-radius: 39upx;
    background-color: #C9EFD6;
    color: #00C141;
    line-height: 54upx;
    text-align: center;
    font-size: 28upx;
  }
  .yi-button{
    width: 122upx;
    height: 54upx;
    border: none;
    background-color: #F2F2F2;
    color: #C8C8C8;
  }
  .desc{
    width: 600upx;
    font-size: 38upx;
    color: #666666;
    margin-top: 18upx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .buttons{
    width: 100%;
    border-top: 1upx solid #D8D8D8;
    height: 98upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 31upx;
    .button-item{
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26upx;
      color: #666;
      image{
        width: 52upx;
        height: 52upx;
      }
    }
  }
}
.noData{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 50%;
}
.topic-item{
  border-bottom: 1upx solid #D8D8D8;
  box-sizing: border-box;
  padding-bottom: 30upx;
}
.tag-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
